<template>
    <div class="main-content">
        <levelbar></levelbar>
        <echartsLayout :formState='formState' :dataListState='dataListState' :eCharts1State='eCharts1State' :eCharts2State='eCharts2State' 
        :eCharts3State='eCharts3State' :chartsListState='chartsListState' :tableState='tableState'>
            <div slot="form">
                <el-form :model="query" ref="query" label-width="90px" label-position="right">
                    <el-row :gutter="41">
                        <el-col :span="7">
                            <el-form-item label="省份" prop="provinceId">
                                <province v-model="query.provinceId" :name.sync='query.provinceName'></province>
                            </el-form-item>
                        </el-col>
                        <el-col :span="7">
                            <el-form-item label="市区" prop="cityId">
                                <city v-model="query.cityId" :province="query.provinceId" :name.sync='query.cityName'></city>
                            </el-form-item>
                        </el-col>
                        <el-col :span="7">
                            <el-form-item label="区县" prop="areaId">
                                <region v-model="query.areaId" :city="query.cityId" :name.sync='query.areaName'></region>
                            </el-form-item>
                        </el-col>
                    </el-row> 
                     <el-row :gutter="41">
                         <el-col :span="7">
                           <el-form-item label="学校类型">
                            <el-select v-model="query.school" placeholder="请选择学校" 
                            style="width:100%">
                                    <el-option v-for="(item,index) in schoolArr" 
                                    :key="index" :label="item.schoolTypeName" 
                                    :value="item.schoolType"> 
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="3" :offset="14">
                            <div class="top-line">
                                <el-button type="primary" class="btn-common" @click="submit">查询</el-button>
                            </div>
                        </el-col>
                    </el-row> 
                </el-form>
            </div> 
            <div slot="eCharts1" v-loading="loadingChart">
                <div class="charts-title">区域学校分类统计</div>
                <div class="charts-display">
                    <trendChart width='100%' height='100%' id="trendChart1" :option='pieChart1Option'></trendChart>
                </div>
             </div>
             <div slot="table">
                <div class="table-title">
                    <span class="table-title-span">
                        <exportExcel @ee="exportFile"></exportExcel>
                    </span>
                </div> 
                <el-table border style="width: 100%" :data="AnnounceList" v-loading="loading"  @sort-change="sortChange">
                        <el-table-column align="center"  label="学校类型">
                            <template scope="scope">
                                <span>{{ scope.row.schoolTypeName ?scope.row.schoolTypeName:'--' }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" sortable="custom" label="学校数量" prop="schoolCount">
                            <template scope="scope">
                                <span>{{ scope.row.schoolCount|isNull}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" label="区域">
                            <template scope="scope">
                                <span>{{ scope.row.areaName |isNull}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column align="center"  label="城市">
                            <template scope="scope">
                                <span>{{ scope.row.cityName |isNull}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column align="center"  label="省份">
                            <template scope="scope">
                                <span>{{ scope.row.provinceName |isNull }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column align="center"  label="统计日期">
                            <template scope="scope">
                                <span>{{ scope.row.countTime |isNull }}</span>
                            </template>
                        </el-table-column>
               </el-table>
                <div class="pagination-container" style="text-align:right">
                    <el-pagination layout="total, sizes, prev, pager, next, jumper" :total="listQuery.total" :current-page.sync="listQuery.page" :page-sizes="config.pageSizes" 
                    :page-size="config.pageSize" @size-change="handleSizeChange" @current-change="handleCurrentChange">
                    </el-pagination>
                </div>
             </div>
        </echartsLayout>
    </div>
</template>

<script>
    import Levelbar from '../../layout/Levelbar';
    import { mapState, mapActions, mapGetters } from 'vuex';
    import province from 'components/CascadeRegion/province';
    import city from 'components/CascadeRegion/city';
    import region from 'components/CascadeRegion/region';
    import echartsLayout from 'components/TableLayout/echartsLayout'; 
    import trendChart from 'components/Charts/trendChart';
    import moment from 'moment';
    import {schoolTypeNames, regionSchoolList, regionSchoolChart} from 'api/pingtaifenxi';
    import exportExcel from 'components/ExportExcel/index'; 
    export default{
        components: {province, city, region, echartsLayout, Levelbar, trendChart, exportExcel},
        data() {
            return {
                formState: false,
                dataListState: true,
                eCharts1State: false,
                eCharts2State: true,
                eCharts3State: true,
                chartsListState: true,
                tableState: false,
                query: {
                    provinceId: '',
                    cityId: '',
                    areaId: '',
                    school: '',
                    schoolName: '',
                    provinceName: '',
                    cityName: '',
                    areaName: ''
                },
                pieChart1Option: {
                    
                },
                loadingChart: true,
                loading: true,
                AnnounceList: [],
                listQuery: {// 分页
                    page: 1,
                    total: 0
                },
                jsonStr: null,
                echartData: [], // 图表的数据
                schoolArr: [
                ],
                schoolCountStatus: '1'// 学校数量，排序状态（0 正序，1降序，默认是降序）
            }
        },
        computed: {
            emptyText() {
                return this.listQuery.page == 1 ? '暂无数据' : '为保障流畅性，暂展示一万条数据，您可查询所需信息';
            },
            ...mapState({
                config: state => state.config.table
            }),
            ...mapGetters([
                'uid'
            ])
        },
        created() {
            this.searchFetchData1();// 查询图标
            this.searchFetchData2();// 查询列表
            this.getSchoolType();// 查询学校类型
        },
        methods: {
            // 全局获取行数
            ...mapActions(['ChangePageSize']),
            submit() {
                this.listQuery.page=1;
                this.searchFetchData1();// 查询图标
                this.searchFetchData2();// 查询列表
            },
            // 查询学校类型
            getSchoolType() {
                schoolTypeNames().then(res => {
                    this.schoolArr=res.data.content;
                    this.schoolArr.unshift({schoolType: '', schoolTypeName: '请选择'})
                })
            },
            // 查询图
            searchFetchData1() {
                this.loadingChart = true;
                let provinceId = this.query.provinceId;
                let cityId = this.query.cityId;
                let areaId = this.query.areaId;
                let schoolType= this.query.school;
                regionSchoolChart(provinceId, cityId, areaId, schoolType).then(res => {
                    this.loadingChart = false;
                    this.echartData=res.data.content;
                    this.doEchart(this.echartData);
                }).catch(() => {
                    this.loadingChart = false;
                });
            },
            // 查询列表
            searchFetchData2() {
                this.loading = true;
                let curPage = this.listQuery.page;
                let pageSize = this.config.pageSize;
                let provinceId = this.query.provinceId;
                let cityId = this.query.cityId;
                let areaId = this.query.areaId;
                let schoolType= this.query.school;
                let schoolCountStatus=this.schoolCountStatus;
                regionSchoolList(curPage, pageSize, provinceId, cityId, areaId, schoolType, schoolCountStatus).then(res => {
                    this.loading = false;
                    if (res.data.content.list) {
                        res.data.content.list.forEach(val => {
                            val.countTime= moment(val.countTime).format('YYYY-MM-DD'); 
                        })
                    }
                    this.AnnounceList = res.data.content.list;
                    this.listQuery.total = res.data.content.pagination?res.data.content.pagination.total:0;
                }).catch(() => {
                    this.loading = false;
                });
            },
            // 导出
            exportFile() {
                let provinceId = this.query.provinceId;
                let cityId = this.query.cityId;
                let areaId = this.query.areaId;
                let schoolType= this.query.school;
                let schoolCountStatus=this.schoolCountStatus;
                window.location.href = `${LOCAL_API.scy}/report/user/outExcelByRegionSchool?provinceId=${provinceId}&cityId=${cityId}&areaId=${areaId}&schoolType=${schoolType}&schoolCountStatus=${schoolCountStatus}`

                // outExcelByRegionSchool(provinceId,cityId,areaId,schoolType,schoolCountStatus).then(res=>{
                //     console.log()
                // })
            },
            doEchart(echartData) {
                let legendList=[];
                let pieList=[];
                echartData.forEach(val => {
                    if (val.schoolTypeName) {
                        legendList.push(val.schoolTypeName)
                        pieList.push({
                            name: val.schoolTypeName,
                            value: val.schoolCount
                        })
                    }
                })
                this.pieChart1Option = {
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },
                    color: ['#7BC0F2', '#2EC7C9', '#FFB980', '#B6A2DE', '#D87A80'],
                    legend: {
                        orient: 'vertical', 
                        x: 'left',
                        data: legendList
                        // data: ['幼儿园', '小学', '初中', '高中', '培训机构']
                    },
                    calculable: true,
                    series: [
                        {
                            name: '访问来源',
                            type: 'pie',
                            radius: '65%',
                            center: ['50%', '50%'],
                            data: pieList
                        }
                    ]
                };
            },
            //  // 分页
            handleSizeChange(val) {
                this.listQuery.page = 1;
                this.loading = true;
                this.ChangePageSize(val);
                this.searchFetchData2();
            },
            handleCurrentChange(val) {
                this.loading = true;
                this.listQuery.page = val;
                this.searchFetchData2();
            },
            sortChange({ column, prop, order }) {
                this.schoolCountStatus=prop=='schoolCount'?order=='ascending'?0:1:'';
                this.searchFetchData2()
            }
        }
    }
</script>
<style lang="scss" scoped>
    .main-content {
        position: relative;
        padding: 20px 20px 10px;
        width: 1400px;
        margin: 0 auto;
    }
    
</style>                     